<template>
	<div class="content">
		<div class="login-avatar">
			<div class="avatar"></div>
			<div class="nickname">工会招募</div>
		</div>
		<div class="login-box">
			<!-- <view class="userinfo">
				<block v-if="!hasUserInfo">
					<button v-if="canIUseGetUserProfile"  @click="getUserProfile"> 获取头像昵称1 </button>
					<button v-else open-type="getUserInfo" @click="getUserInfo"> 获取头像昵称2 </button>
				</block>
				<block wx:else>
					<image bindtap="bindViewTap" class="userinfo-avatar" :src="userInfo.avatarUrl" mode="cover"></image>
					<text class="userinfo-nickname">{{userInfo.nickName}}</text>
				</block>
			</view> -->


			<div class="login-btn login" @click="login">一键登录</div>
			<div class="login-mobile login">手机号安全登录</div>
			<div class="login-none login">暂不登录</div>
		</div>
		<div class="argeent">
			<span class="check"></span>
			<span @click="to_privacy">同意《用户协议》和《隐私政策》</span>
		</div>
	</div>
</template>

<script>
	import request from '../../utils/request'
	console.log("🚀 ~ request:")
	export default {
		data() {
			return {
				userInfo: {},
				hasUserInfo: false,
				canIUseGetUserProfile: false,
			}
		},
		onLoad() {
			if (uni.getUserProfile) {
				this.canIUseGetUserProfile = true
			}

		},
		methods: {

			getUserProfile(e) {
				// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
				// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
				uni.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						console.log("🚀 ~ getUserProfile ~ res:", res)
						this.userInfo = res.userInfo
						// this.setData({
						// 	userInfo: res.userInfo,
						// 	hasUserInfo: true
						// })
					}
				})
			},
			getUserInfo(e) {
				// 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
				// this.setData({
				// 	userInfo: e.detail.userInfo,
				// 	hasUserInfo: true
				// })
			},
	
			login(){
				wx.login({
					async success (res) {
						if (res.code) {
							//发起网络请求
							const resData = await request('api/login/login', 'post', {code: res.code});
							console.log("🚀 ~ success ~ res:", resData)
							uni.showToast({
								title: resData.msg,
								icon: 'success',
								mask: true
							})
							uni.setStorage({
								key: 'userInfo',
								data: resData.data,
								success: (result) => {},
								fail: (error) => {}
							})
							uni.switchTab({
								url: '/pages/home/index'
							});


							/*
							wx.request({
								url: ' http://zhandui.mguit.com/api/login/login',
								method:'post',
								data: {
									code: res.code
								},
								success:({data}) => {
									if(data.code == 10000){
										uni.showToast({
											title: data.msg,
											icon: 'success',
											mask: true
										})
									}
								}
							})*/
							
						} else {
							console.log('登录失败！' + res.errMsg)
						}
					}
				})
			},
			to_privacy(){
				uni.navigateTo({
					url: '../privacy/index' // 跳转到对应路径的 tabBar 页面
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.login-avatar {
		margin-top: 55px;
		text-align: center;
		.avatar {
			width: 110px;
			height: 110px;
			background: #FFF1F1;
			border-radius: 60px 60px 60px 60px;
			border: 3px solid #000000;
		}
		.nickname {
			font-size: 20px;
			margin-top: 11px;
		}
	}
	.login-box {
		margin-top: 76px;
		.login {
			width: 300px;
			height: 40px;
			border-radius: 100px 100px 100px 100px;
			border: 2px solid #000000;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 20px;
			font-size: 16px;
		}
		.login-btn {
			color: #fff;
			background: linear-gradient( 270deg, rgba(222,55,63,0.9) 0%, rgba(255,105,105,0.9) 100%);
		}
		.login-none {
			background: #FFF1F1;
			border-color: #FFF1F1;
		}
	}
	.argeent {
		font-size: 12px;
		width: 100%;
		position: fixed;
		text-align: center;
		bottom: 30px;
		display: flex;
		justify-content: center;
		.check {
			width: 16px;
			height: 16px;
			border-radius: 5px;
			background: #FFF1F1;
			border: 1px solid #FFCDCD;
			display: flex;
			margin-right: 5px;
		}
	}

</style>
